<!DOCTYPE html>
<html>
<head>
<style>
input { padding: 10px; font-size: 16px; }
.invalid { border-color: red; }
.valid { border-color: green; }
</style>
</head>
<body>

<h2>Enter your email:</h2>
<input type="text" oninput="this.className=(/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.value)?'valid':'invalid')">

</body>
</html>